import React, { useState } from 'react';
import './index.css';

function AddMatch() {
  const [teamA, setTeamA] = useState('');
  const [teamB, setTeamB] = useState('');
  const [date, setDate] = useState('');
  const [location, setLocation] = useState('');
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');
  const [message, setMessage] = useState('');

  // 生成14:00到22:30的半小时区间
  const timeOptions = Array.from({length: 18}, (_, i) => {
    const hour = 14 + Math.floor(i / 2);
    const minute = i % 2 === 0 ? '00' : '30';
    return `${hour.toString().padStart(2, '0')}:${minute}`;
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!teamA || !teamB || !date || !location || !startTime || !endTime) {
      setMessage('请填写所有字段');
      return;
    }
    setMessage(`比赛已录入：${teamA} vs ${teamB}，${date}，${startTime}-${endTime}，${location}`);
    setTeamA('');
    setTeamB('');
    setDate('');
    setLocation('');
    setStartTime('');
    setEndTime('');
  };

  return (
    <div className="login-container">
      <form className="login-form" onSubmit={handleSubmit}>
        <h2>录入比赛信息</h2>
        <input
          type="text"
          placeholder="主队"
          value={teamA}
          onChange={(e) => setTeamA(e.target.value)}
        />
        <input
          type="text"
          placeholder="客队"
          value={teamB}
          onChange={(e) => setTeamB(e.target.value)}
        />
        <input
          type="text"
          placeholder="比赛地点"
          value={location}
          onChange={(e) => setLocation(e.target.value)}
        />
        <input
          type="date"
          placeholder="比赛日期"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
        <div className="time-range-row">
          <select value={startTime} onChange={e => setStartTime(e.target.value)}>
            <option value="">开始时间</option>
            {timeOptions.map(t => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
          <select value={endTime} onChange={e => setEndTime(e.target.value)}>
            <option value="">结束时间</option>
            {timeOptions.map(t => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
        </div>
        {message && <div className="error">{message}</div>}
        <button type="submit">录入</button>
      </form>
    </div>
  );
}

export default AddMatch; 